<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Protoanimate: Gallery Test 1</title>
<script src='../prototype.js'></script>
<script src='../protohover.js'></script>
<script src='../jsinterpolate.js'></script>
<script src='../intervalometer.js'></script>
<script src='../../protoanimate.js'></script>
<script>
	Event.observe(window, 'load', function() {
		var gallery = $('gallery');
		gallery.addClassName('animated');
		
		function set_gallery(props) {
			
		}
		
		var photo_animation = AnimationFactory({'x_center': '0px'},  {'x_center': '100px'}, 250, 10, null, null, "set_gallery");
		for (var i = 0, l = gallery.children.length; i < l; i++) {
			var node = gallery.children[i];
			node.set_gallery = set_gallery;
			var ta = photo_animation(node);
			node.hover(ta.forward, ta.revers);
		};
	});
</script>
<style>
	div#gallery {
		display: block;
		background-color: blue;
		width: 500px;
		height: 300px;
	}
	
	div#gallery.animated {
		position: relative;
		background-color: red;
		overflow: hidden;
	}
	
	div#gallery.animated a {
		position: absolute;
		display: block;
		top: 50%;
	}
</style>
</head>
<body>
	<div id="header">
		<p>Prototype Animation</p>
	</div>
	<div id='gallery'>
		<a href="tabs_example_1_big.jpg"><img src="tabs_example_1_small.jpg" /></a>
		<a href="tabs_example_2_big.jpg"><img src="tabs_example_2_small.jpg" /></a>
		<a href="tabs_example_3_big.jpg"><img src="tabs_example_3_small.jpg" /></a>
		<a href="tabs_example_4_big.jpg"><img src="tabs_example_4_small.jpg" /></a>
	</div>
	<div id="content">
		<div id="pages">
			<div id="opacity">
			</div>
			<div id="width">
			</div>
			<div id="animation">
			</div>
		</div>
	</div>
</body>
</html>
